<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
             * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
      float: left;
    }

    .box {
      /* display: flex; */
      /* flex-wrap: wrap; */
      width: 540px;
      margin: 20px auto;
    }



    .box li {
      width: 100px;
      height: 100px;
      margin: 0 10px 10px 0;
    }

    .box li:nth-child(5n+1) {
      margin-right: 0;
    }

    .box li img {
      width: 100%;
      height: 100%;
      border: 2px solid #258DF2;
      border-radius: 10px 0 10px 0;
    }
    </style>
</head>
<body>
    

    <script>
        let num=prompt('请输入你需要看到的英雄个数')
        let arr=['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']
        let str=''
        for(let i=1;i<=num;i++){
            str=`<li><img src="../核心练习作业素材/渲染图片/images/${arr[i]}.webp" alt=""></li>`
            document.write(
            `
            <ul class="box">
             ${str}
            </ul>
            `
        )
        }
       
    </script>
</body>
</html>